<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="fixed top-0 w-full bg-white shadow-sm z-50">
      <div
        class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between"
      >
        <div class="flex items-center space-x-8">
          <h1 class="text-2xl font-bold text-[#f31947]">环球旅行</h1>
          <div class="relative">
            <input
              type="text"
              placeholder="搜索目的地、主题、路线"
              class="w-64 h-10 pl-10 pr-4 rounded-full border-none bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#f31947] text-sm"
            />
            <i class="fas fa-search absolute left-4 top-3 text-gray-400"></i>
          </div>
        </div>
        <div class="flex items-center space-x-6">
          <button
            class="!rounded-button whitespace-nowrap text-gray-600 hover:text-blue-600"
          >
            <i class="far fa-heart mr-2"></i>收藏
          </button>
          <div class="flex items-center space-x-4">
            <button
              class="!rounded-button whitespace-nowrap text-gray-600 hover:text-blue-600"
            >
              <i class="far fa-clipboard mr-2"></i>我的订单
            </button>
            <button
              class="!rounded-button whitespace-nowrap text-gray-600 hover:text-blue-600"
            >
              <i class="far fa-bell mr-2"></i>
              <span class="relative">
                我的消息
                <span
                  class="absolute -top-1 -right-2 w-2 h-2 bg-red-500 rounded-full"
                ></span>
              </span>
            </button>
            <div class="flex items-center space-x-2">
              <div class="relative group">
                <img
                  src="https://ai-public.mastergo.com/ai/img_res/402cee5c6198dcd1632ad719c85c3b64.jpg"
                  alt="用户头像"
                  class="w-8 h-8 rounded-full object-cover"
                />
                <div
                  class="absolute top-full right-0 mt-2 w-32 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block"
                >
                  <a
                    href="#"
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >个人中心</a
                  >
                  <a
                    href="#"
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >设置</a
                  >
                  <a
                    href="#"
                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                    >退出登录</a
                  >
                </div>
              </div>
              <span class="text-gray-800 font-medium">李美玲</span>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!-- Hero区域 -->
    <div class="relative h-[400px] mt-16 overflow-hidden">
      <swiper
        :modules="swiperModules"
        :pagination="{ clickable: true }"
        :autoplay="{ delay: 5000, disableOnInteraction: false }"
        class="h-full"
      >
        <swiper-slide>
          <div class="relative h-full">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/295990ab21017251dfc7ad90be37da1d.jpg"
              class="w-full h-full object-cover object-top"
              alt="hero background"
            />
            <div
              class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent"
            >
              <div
                class="relative max-w-7xl mx-auto px-4 h-full flex items-center"
              >
                <div class="max-w-2xl text-white">
                  <h1
                    class="font-[Playfair_Display] text-5xl font-bold mb-6 italic tracking-wide"
                  >
                    探索世界的每个角落
                  </h1>
                  <p class="font-[Lora] text-xl mb-8 tracking-wide">
                    让我们带您开启一段难忘的旅程，体验不同的文化与风景。精心策划的行程，专业的服务团队，为您打造完美的旅行体验。
                  </p>
                  <button
                    class="!rounded-button whitespace-nowrap bg-[#f31947] text-white px-8 py-3 text-lg hover:bg-[#d11539]"
                  >
                    立即开启旅程
                  </button>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="relative h-full">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/12bcfcb34c7976dfbb68b9a9f248ae5d.jpg"
              class="w-full h-full object-cover object-top"
              alt="hero background"
            />
            <div
              class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent"
            >
              <div
                class="relative max-w-7xl mx-auto px-4 h-full flex items-center"
              >
                <div class="max-w-2xl text-white">
                  <h1
                    class="font-[Playfair_Display] text-5xl font-bold mb-6 italic tracking-wide"
                  >
                    遇见最美的风景
                  </h1>
                  <p class="font-[Lora] text-xl mb-8 tracking-wide">
                    从希腊蓝白小镇到日本樱花季，从马尔代夫海滩到瑞士雪山，带您邂逅地球上最动人的景色。
                  </p>
                  <button
                    class="!rounded-button whitespace-nowrap bg-[#f31947] text-white px-8 py-3 text-lg hover:bg-[#d11539]"
                  >
                    预订行程
                  </button>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="relative h-full">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/a62c2f7818c63b892ccb27bdb4a59844.jpg"
              class="w-full h-full object-cover object-top"
              alt="hero background"
            />
            <div class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent" >
              <div class="relative max-w-7xl mx-auto px-4 h-full flex items-center" >
                <div class="max-w-2xl text-white">
                  <h1
                    class="font-[Playfair_Display] text-5xl font-bold mb-6 italic tracking-wide"
                  >
                    奢享完美假期
                  </h1>
                  <p class="font-[Lora] text-xl mb-8 tracking-wide">
                    精选全球顶级度假胜地，为您打造专属的豪华旅行体验。从私人沙滩到米其林晚宴，尽享至臻服务。
                  </p>
                  <button
                    class="!rounded-button whitespace-nowrap bg-[#f31947] text-white px-8 py-3 text-lg hover:bg-[#d11539]"
                  >
                    尊享定制
                  </button>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="relative h-full">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/f530d49bd2b591237e9a4c7340804e83.jpg"
              class="w-full h-full object-cover object-top"
              alt="hero background"
            />
            <div
              class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent"
            >
              <div
                class="relative max-w-7xl mx-auto px-4 h-full flex items-center"
              >
                <div class="max-w-2xl text-white">
                  <h1
                    class="font-[Playfair_Display] text-5xl font-bold mb-6 italic tracking-wide"
                  >
                    探寻文明印记
                  </h1>
                  <p class="font-[Lora] text-xl mb-8 tracking-wide">
                    穿越千年时光，感受古老文明的魅力。让我们带您走进历史，体验不同文化的碰撞与交融。
                  </p>
                  <button
                    class="!rounded-button whitespace-nowrap bg-[#f31947] text-white px-8 py-3 text-lg hover:bg-[#d11539]"
                  >
                    开启文化之旅
                  </button>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 主要内容区 -->
    <div class="max-w-7xl mx-auto px-4 py-12">
      <!-- 目的地分类 -->
      <div class="mb-16">
        <div class="mb-8 flex items-center justify-between">
          <div class="flex items-center space-x-6">
            <div class="flex items-center space-x-4">
              <i class="fas fa-plane-departure text-4xl text-transparent bg-gradient-to-r from-[#f31947] to-[#ff6b84] bg-clip-text"></i>
              <h2 class="text-3xl font-[Playfair_Display] font-bold bg-gradient-to-r from-[#f31947] to-[#ff6b84] bg-clip-text text-transparent italic tracking-wide relative" >
                出境游目的地
                <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-[#f31947] to-[#ff6b84] rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>
              </h2>
            </div>
            <div
              class="h-8 w-[2px] bg-gradient-to-b from-[#f31947] to-[#ff6b84] rounded-full opacity-30"
            ></div>
            <p class="text-gray-500 italic">Discover the world</p>
          </div>
          <button
            class="!rounded-button text-[#f31947] hover:text-[#d11539] flex items-center space-x-2"
          >
            <span>查看更多</span>
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
        <div class="grid grid-cols-5 gap-6">
          <div
            v-for="(dest, index) in internationalDestinations"
            :key="index"
            class="group overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
          >
            <div class="flex flex-col">
              <div class="relative aspect-square overflow-hidden">
                <img
                  :src="dest.image"
                  :alt="dest.name"
                  class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-300"
                />
              </div>
              <div class="p-4 bg-white">
                <h3 class="text-xl font-bold text-gray-900">{{ dest.name }}</h3>
                <p class="text-sm text-gray-600 mt-1">{{ dest.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-16">
        <div class="mb-8 flex items-center justify-between">
          <div class="flex items-center space-x-6">
            <div class="flex items-center space-x-4">
              <i
                class="fas fa-map-marked-alt text-4xl text-transparent bg-gradient-to-r from-[#f31947] to-[#ff6b84] bg-clip-text"
              ></i>
              <h2
                class="text-3xl font-[Playfair_Display] font-bold bg-gradient-to-r from-[#f31947] to-[#ff6b84] bg-clip-text text-transparent italic tracking-wide relative"
              >
                国内游目的地
                <div
                  class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-[#f31947] to-[#ff6b84] rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"
                ></div>
              </h2>
            </div>
            <div
              class="h-8 w-[2px] bg-gradient-to-b from-[#f31947] to-[#ff6b84] rounded-full opacity-30"
            ></div>
            <p class="text-gray-500 italic">Explore China</p>
          </div>
          <button
            class="!rounded-button text-[#f31947] hover:text-[#d11539] flex items-center space-x-2"
          >
            <span>查看更多</span>
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
        <div class="grid grid-cols-5 gap-6">
          <div
            v-for="(dest, index) in domesticDestinations"
            :key="index"
            class="group overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
          >
            <div class="flex flex-col">
              <div class="relative aspect-square overflow-hidden">
                <img
                  :src="dest.image"
                  :alt="dest.name"
                  class="w-full h-full object-cover object-top group-hover:scale-110 transition-transform duration-300"
                />
              </div>
              <div class="p-4 bg-white">
                <h3 class="text-xl font-bold text-gray-900">{{ dest.name }}</h3>
                <p class="text-sm text-gray-600 mt-1">{{ dest.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <footer class="bg-gray-800 text-white py-12">
      <div class="max-w-7xl mx-auto px-4">
        <div class="grid grid-cols-5 gap-8">
          <div>
            <h3 class="text-lg font-bold mb-4">关于我们</h3>
            <ul class="space-y-2">
              <li><a href="#" class="hover:text-blue-400">公司简介</a></li>
              <li><a href="#" class="hover:text-blue-400">联系方式</a></li>
              <li><a href="#" class="hover:text-blue-400">加入我们</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">旅游服务</h3>
            <ul class="space-y-2">
              <li><a href="#" class="hover:text-blue-400">旅游保险</a></li>
              <li><a href="#" class="hover:text-blue-400">签证服务</a></li>
              <li><a href="#" class="hover:text-blue-400">旅游攻略</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">帮助中心</h3>
            <ul class="space-y-2">
              <li><a href="#" class="hover:text-blue-400">预订指南</a></li>
              <li><a href="#" class="hover:text-blue-400">常见问题</a></li>
              <li><a href="#" class="hover:text-blue-400">用户协议</a></li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">关注我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="hover:text-[#ff6b84]"
                ><i class="fab fa-weixin text-2xl"></i
              ></a>
              <a href="#" class="hover:text-[#ff6b84]"
                ><i class="fab fa-weibo text-2xl"></i
              ></a>
              <a href="#" class="hover:text-[#ff6b84]"
                ><i class="fab fa-qq text-2xl"></i
              ></a>
            </div>
          </div>
        </div>
        <div
          class="mt-8 pt-8 border-t border-gray-700 text-center text-sm text-gray-400"
        >
          © 2024 环球旅行. 保留所有权利.
        </div>
      </div>
    </footer>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper/modules";
onMounted(() => {
  // 动态加载 Google Fonts
  const link = document.createElement("link");
  link.href =
    "https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&family=Lora&display=swap";
  link.rel = "stylesheet";
  document.head.appendChild(link);
});
const swiperModules = [Pagination, Autoplay];
const internationalDestinations = [
  {
    name: "泰国（曼谷）",
    description: "古色古香 | 美食天堂 | 购物胜地",
    image:
      "https://ai-public.mastergo.com/ai/img_res/47ea1b5a06d0069d65fdc896a3dc1212.jpg",
  },
  {
    name: "泰国（普吉岛）",
    description: "阳光海滩 | 海岛度假 | 水上运动",
    image:
      "https://ai-public.mastergo.com/ai/img_res/50083e270c1a361817d1a1218b997c68.jpg",
  },
  {
    name: "新加坡",
    description: "花园城市 | 美食天堂 | 文化交融",
    image:
      "https://ai-public.mastergo.com/ai/img_res/ff8aa11f3caf947ae56cfdf4558f6783.jpg",
  },
  {
    name: "马来西亚",
    description: "多元文化 | 热带雨林 | 海岛风情",
    image:
      "https://ai-public.mastergo.com/ai/img_res/016fe9722c8bafeacf4f11ac3b0555ee.jpg",
  },
  {
    name: "文莱",
    description: "伊斯兰风情 | 奢华皇城 | 自然生态",
    image:
      "https://ai-public.mastergo.com/ai/img_res/ad42ab4b00c0aaf5d8d69fbfd3244232.jpg",
  },
  {
    name: "越南",
    description: "异国风情 | 历史遗迹 | 自然奇观",
    image:
      "https://ai-public.mastergo.com/ai/img_res/e796ac14b2cf8740be0c99f8ecdc5040.jpg",
  },
  {
    name: "老挝",
    description: "佛教文化 | 慢生活 | 田园风光",
    image:
      "https://ai-public.mastergo.com/ai/img_res/8115180444181d4a0e68a7bc74d81b89.jpg",
  },
  {
    name: "柬埔寨",
    description: "古文明 | 神秘庙宇 | 异域风情",
    image:
      "https://ai-public.mastergo.com/ai/img_res/1811ce4284c1c7f06313c7d4bf162433.jpg",
  },
  {
    name: "菲律宾",
    description: "海岛天堂 | 潜水胜地 | 阳光沙滩",
    image:
      "https://ai-public.mastergo.com/ai/img_res/1500aadeb8c2f06390b21b21ed4c56f0.jpg",
  },
  {
    name: "印度尼西亚",
    description: "度假天堂 | 火山地貌 | 生态探险",
    image:
      "https://ai-public.mastergo.com/ai/img_res/93c1121d81f9e525df5c75641afd1548.jpg",
  },
  {
    name: "日本",
    description: "樱花国度 | 精致文化 | 现代时尚",
    image:
      "https://ai-public.mastergo.com/ai/img_res/96339955017f6e4de464c30a11dd41da.jpg",
  },
  {
    name: "韩国",
    description: "时尚之都 | 美食购物 | 浪漫文化",
    image:
      "https://ai-public.mastergo.com/ai/img_res/aa7df6828ee3452b98dc19757f0f19bc.jpg",
  },
];
const domesticDestinations = [
  {
    name: "北京｜天津",
    description: "古都风韵 | 现代都市 | 文化荟萃",
    image:
      "https://ai-public.mastergo.com/ai/img_res/f6435277899b78d5c11e90d575e9cf24.jpg",
  },
  {
    name: "东北",
    description: "冰雪奇缘 | 火山温泉 | 原始森林",
    image:
      "https://ai-public.mastergo.com/ai/img_res/3541f9798cc2fc8088f9590e1a068351.jpg",
  },
  {
    name: "山东",
    description: "儒家文化 | 海滨风情 | 名山胜景",
    image:
      "https://ai-public.mastergo.com/ai/img_res/217357a8f22143e9509983cc9e015b19.jpg",
  },
  {
    name: "华东",
    description: "江南水乡 | 现代魅力 | 人文景观",
    image:
      "https://ai-public.mastergo.com/ai/img_res/5ad2257f9564e76836843674ba7429c9.jpg",
  },
  {
    name: "福建｜广东",
    description: "闽南文化 | 岭南风情 | 美食之都",
    image:
      "https://ai-public.mastergo.com/ai/img_res/d9099cf4b6f932b2f42a6525413870df.jpg",
  },
  {
    name: "海南｜西沙",
    description: "热带风情 | 阳光海滩 | 海岛度假",
    image:
      "https://ai-public.mastergo.com/ai/img_res/251e166d5e7ed00fe415c8bc51083cdf.jpg",
  },
  {
    name: "贵州",
    description: "民族风情 | 自然奇观 | 生态之州",
    image:
      "https://ai-public.mastergo.com/ai/img_res/b95592d97d7b26f4bcbbf102d074e409.jpg",
  },
  {
    name: "川藏渝",
    description: "雪域高原 | 天然美景 | 山城魅力",
    image:
      "https://ai-public.mastergo.com/ai/img_res/9ab7076f68cb2d06fb197ee466c372b0.jpg",
  },
  {
    name: "江西｜安徽",
    description: "徽派建筑 | 山水画廊 | 田园风光",
    image:
      "https://ai-public.mastergo.com/ai/img_res/8f20dba907b1016817b0a9345de69cb0.jpg",
  },
  {
    name: "湖南｜湖北",
    description: "山水奇观 | 楚文化 | 道教圣地",
    image:
      "https://ai-public.mastergo.com/ai/img_res/cda3d458a788e78ef3d8d3ae3acdf826.jpg",
  },
  {
    name: "河南｜河北",
    description: "古都文化 | 功夫圣地 | 皇家园林",
    image:
      "https://ai-public.mastergo.com/ai/img_res/5e030385130c2823256e4ec480d7c7d9.jpg",
  },
  {
    name: "山西｜内蒙",
    description: "草原风情 | 佛教圣地 | 古城古韵",
    image:
      "https://ai-public.mastergo.com/ai/img_res/c07b153f8fff4f1f076717126c020b02.jpg",
  },
  {
    name: "陕西",
    description: "千年古都 | 丝路起点 | 文化瑰宝",
    image:
      "https://ai-public.mastergo.com/ai/img_res/6e44c4ea251ca688979558a82bc569d1.jpg",
  },
  {
    name: "甘青宁",
    description: "丝路遗迹 | 高原奇观 | 大漠风光",
    image:
      "https://ai-public.mastergo.com/ai/img_res/7e08dc98a9efcaec115605052798f0eb.jpg",
  },
  {
    name: "新疆",
    description: "西域风情 | 自然奇观 | 民族文化",
    image:
      "https://ai-public.mastergo.com/ai/img_res/f3eec1e00f5983c12b81982bb551a08a.jpg",
  },
];
const isLoggedIn = ref(true);
const hasUnreadMessage = computed(() => true);
const specialRoutes = [
  {
    name: "日本东京+大阪+京都 6 日游",
    description: "含机票+酒店+接送+导游，打卡日本经典景点",
    price: "6999",
    image:
      "https://ai-public.mastergo.com/ai/img_res/396c62d9d379834e967e71b76a84612d.jpg",
  },
  {
    name: "云南丽江+大理 5 日游",
    description: "特惠双古城，玉龙雪山+洱海游船+古镇深度游",
    price: "2999",
    image:
      "https://ai-public.mastergo.com/ai/img_res/bbcf08fe9a1fb773f8a7d0852145e213.jpg",
  },
  {
    name: "马尔代夫马富士 6 日自由行",
    description: "一价全包，水上别墅+全餐+水上活动",
    price: "12999",
    image:
      "https://ai-public.mastergo.com/ai/img_res/d649dd0c3c34a8ed774cac15dcffb75a.jpg",
  },
];
</script>
<style scoped>
.destination-card:hover .destination-image {
  transform: scale(1.1);
}
.destination-image {
  transition: transform 0.3s ease-in-out;
}
</style>
